* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
    body { background:#f4f4f4; }

    /* Header */
    header {
        background: linear-gradient(135deg,#0066ff,#00c8ff);
        padding: 18px 5%;
        color:white;
        display:flex;
        justify-content:space-between;
        align-items:center;
        position:sticky;
        top:0;
        z-index:1000;
    }
    header a { 
            text-decoration: none;
            font-size: 20px;
            color: #ffdb4d; 
            margin:10px 0;}

    nav { display:flex; gap:25px; }
    nav a { color:white; font-weight:bold; transition:0.2s; }
    nav a:hover { color:#ffcc00; }

    .menu-btn { display:none; font-size:2rem; cursor:pointer; }
    @media(max-width:768px){
        nav { 
            display:none; 
            flex-direction:column; 
            background:white; 
            padding:15px; 
            border-radius:10px; 
            position:absolute; 
            right:5%; 
            top:70px; 
            width:160px; 
            box-shadow:0 4px 10px rgba(0,0,0,0.2);}
        nav a { 
            text-decoration: none;
            font-size: 18px;
            color: #0066ff; 
            margin:10px 0;}
    
        .menu-btn { display:block; }
    }

    /* Hero */
    .hero {
        padding:100px 5%;
        background:url("Page\ boutique\ 🐈\ gpt\ 2.png");
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        text-align: center;
        color:white;
        text-shadow:1px 1px 5px #000;
    }

    .hero h2 { font-size:2.8rem; margin-bottom:20px; }
    .hero p { font-size:1.2rem; margin-bottom:25px; }
    .hero button {
        padding:14px 35px;
        background:linear-gradient(135deg,#ffcc00,#ffdb4d);
        border:none;
        border-radius:30px;
        cursor:pointer;
        font-size:1.1rem;
        font-weight:bold;
        color:#222;
        box-shadow:0 4px 8px rgba(0,0,0,0.2);
        transition:0.3s;
    }
    .hero button:hover { transform:translateY(-3px); 
        background:linear-gradient(135deg,#ffe279,#fff49a); }

    /* Produits */
    .products { padding:60px 5%; }
    .products h3 { text-align:center; 
        font-size:2rem; 
        color:#0066cc; 
        margin-bottom:40px; }

    .product-grid {
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:25px;
    }

    .product {
        background:white;
        padding:20px;
        border-radius:20px;
        box-shadow:0 6px 16px rgba(0,0,0,0.12);
        text-align:center;
        transition:0.3s;
    }
    .product:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.18); }
    .product img { width:80%; height:220px; object-fit:cover; border-radius:14px; margin-bottom:12px; }
    .product button {
        margin-top:12px;
        padding:12px 28px;
        background:linear-gradient(135deg,#ffcc00,#ffdb4d);
        border:none;
        border-radius:30px;
        cursor:pointer;
        font-weight:bold;
        color:#222;
        transition:0.3s;
        box-shadow:0 4px 6px rgba(0,0,0,0.15);
    }
    .product button:hover { transform:translateY(-2px); background:linear-gradient(135deg,#ffe279,#fff49a); }

    /* Panier flottant */
    .cart-box {
        position:sticky;
        top:15px;
        right:15px;
        background:white;
        padding:12px 18px;
        border-radius:15px;
        box-shadow:0 4px 12px rgba(0,0,0,0.25);
        z-index:2000;
        font-weight:bold;
        font-size:1rem;
        display:inline;
        align-items:center;
        gap:10px;
        cursor:pointer;
        transition:0.3s;
    }
    .cart-box:hover { transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,0.3); }
    .cart-box span { color:#0066ff; }

    /* Panier déroulant */
    .cart-panel {
        position:fixed;
        top:70px;
        right:15px;
        width:280px;
        background:white;
        padding:15px;
        border-radius:15px;
        box-shadow:0 6px 20px rgba(0,0,0,0.25);
        z-index:3000;
        max-height:0;
        overflow:hidden;
        transition:max-height 0.4s ease, opacity 0.4s ease;
        opacity:0;
    }
    .cart-panel.open { max-height:400px; opacity:1; }

    .cart-panel h4 { margin-bottom:10px; font-size:1.2rem; color:#0066ff; }

    .cart-items { max-height:250px; overflow-y:auto; margin-bottom:10px; }

    .cart-item {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:6px 0;
        border-bottom:1px solid #ddd;
        font-size:0.9rem;
    }
    .cart-item button {
        background:#ff4d4d;
        border:none;
        border-radius:6px;
        padding:3px 7px;
        cursor:pointer;
        font-size:0.8rem;
        color:white;
        transition:0.2s;
    }
    .cart-item button:hover { background:#ff1a1a; }

    footer {
      background: black;
      color: white;
      text-align: center;
      padding: 1em;
      margin-top: 20px;
    }
    footer a{
  text-decoration: none;
  font-size: 20px;
  color: #ffdb4d;
}
.achat{
    background-color: chartreuse;
    border-radius: 10px;
}
.discuter{
    background-color: orange;
    border-radius: 10px;
}
.payer{
    font-size: 20px;
    width: 100px;
    background-color: springgreen;
    border-radius: 10px;
}
.cartTotal{
    margin-right: 50.5px;
}
 .service a{
    text-decoration: none;
    color: gold;

}




.services { 
    padding: 70px 5%; 
    text-align: center; 
}

        .services h3 { 
             font-size: 2rem;
             margin-bottom: 40px; 
             color: #0066cc; 
            }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

        .service {
            background: white;
            padding: 40px 20px;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: 0.3s;
        }

        .service:hover { transform: translateY(-8px); }
        .service img { width: 80px; margin-bottom: 20px; }
        .cuisine a{
            text-decoration: none;
        }
        .retour a{
            text-decoration: none;
        }
        .retour img{
            width: 50px;
            height: 50px;
        }